/**
 * Created by huangchao on 15/11/2017.
 * type：类型：1.普通文本框 2.时间文本框 3.下拉框 4.勾选框
 */
import React, { Component } from 'react'
import PropTypes from 'prop-types'
import style from './style.less'
import { Input, Select, DatePicker, Cascader } from 'antd'
import {options} from '../../static/data'
import store from 'store'
// import moment from 'moment'
const Option = Select.Option
const { RangePicker } = DatePicker

class QueryItem extends Component { // 文本输入框
  static propTypes = {
    data: PropTypes.object,
  }

  state = {
    disabled: false,
  }

  render() {
    const data = this.props.data
    // console.log(data)
    return (
      <div className={style.QueryItemWrap}>
        <div className={style.name}>{data.name}：</div>
        <div className={style.selectBox}>
          <Input
            placeholder={data.placeholder}
            disabled={data.disabled}
            {...this.props}
          />
        </div>
      </div>
    )
  }
}

class QuerySelect extends Component { // 下拉选择
  static propTypes = {
    data: PropTypes.object,
  }

  render() {
    const data = this.props.data
    const quertList = store.get('crm:queryList') || {}
    const key = data.keyword
    // console.log(quertList)
    const list = quertList[key] || []
    return (
      <div className={style.QueryItemWrap}>
        <div className={style.name}>{data.name}：</div>
        <div className={style.selectBox}>
          <Select {...this.props}
            disabled={data.disabled}
            placeholder={data.placeholder}
            defaultValue={String(data.defaultValue)}
            className={style.select}>
            {
              list.map((d, i) => {
                return (
                  <Option key={i} disabled={d.disabled} value={String(d.id)}>{d.dictName}</Option>
                )
              })
            }
          </Select>
        </div>
      </div>
    )
  }
}

class QueryTime extends Component { // 日期选择
  static propTypes = {
    data: PropTypes.object,
    onChange: PropTypes.func,
  }

  onChange = (data, datastring) => {
    this.props.onChange(datastring)
  }

  render() {
    const data = this.props.data
    // const defaultValue = data.defaultValue || []
    // console.log(this.props) defaultValue={[moment(defaultValue[0]), moment(defaultValue[1])]}
    return (
      <div className={style.QueryItemWrap}>
        <div className={style.name}>{data.name}：</div>
        <div className={style.QueryTimeBox}>
          <RangePicker
            onChange={this.onChange}
            size="Large" />
        </div>
      </div>
    )
  }
}

class QueryCascader extends Component { // 级联选择类型
  // static propTypes = {
  //   data: PropTypes.object,
  // }

  render() {
    // const data = this.props.data
    // console.log(this.props)
    return (
      <div className={style.QueryItemWrap}>
        <div className={style.name}>企业所在地区：</div>
        <div className={style.selectBox}>
          <Cascader options={options} placeholder="企业所在地区" />
        </div>
      </div>
    )
  }
}

export {
  QueryItem,
  QuerySelect,
  QueryTime,
  QueryCascader,
}
window.store = store
